import { Button, Col, Row, Input, Select, Tooltip } from 'antd';
import React from 'react';
import CommonListsIndex from '../../../components/CommonLists/index';
import FilterToolNew from '../../../components/FilterTool/FilterToolNew';
import { connect } from 'react-redux';
import FnAdd from './add';
import UserList from './list';
import CodeLabel from '../../../components/CodeLabel';
import SearchBar from 'src/components/SearchBar';

function mapStateToProps(state) {
  return {
    use_scope: state.code.use_scope || [],
    func_param_limit_scope: state.code.func_param_limit_scope || [],
  };
}

@connect(mapStateToProps)
class FnIndex extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'fn';
    this.addComponent = FnAdd;
    this.editComponent = FnAdd;
    this.listsComponent = UserList;
    this.queryParams = {};
    this.initQueryPanigation = {};
    this.state = {
      ...this.state,
    };
  }
  componentDidMount() {
    this.freshQueryList();
  }
  getOpenParam = (record) => {
    return record.action_id;
  };

  getColumns = () => {
    return [
      {
        title: '函数名称',
        key: 'name',
        dataIndex: 'name',
        width: '160px',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '函数code',
        key: 'code',
        width: '160px',
        dataIndex: 'code',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '状态',
        key: 'status',
        width: '100px',
        dataIndex: 'status',
        ellipsis: true,
        render(text) {
          return text === 1 ? '启用' : '停用';
        },
      },
      {
        title: '函数作用域',
        key: 'useScope',
        width: '160px',
        dataIndex: 'useScope',
        ellipsis: true,
        render: (text) => {
          const funcLimit = text ? text.split(',') : [];
          const limitVal = funcLimit.map((item, i) => {
            if (i != funcLimit.length - 1) {
              return (
                <span>
                  <CodeLabel code='use_scope' value={item} />/
                </span>
              );
            } else {
              return <CodeLabel code='use_scope' value={item} />;
            }
          });
          return (
            <Tooltip title={limitVal} placement='topLeft'>
              {limitVal}
            </Tooltip>
          );
        },
      },

      {
        title: '描述',
        key: 'remark',
        dataIndex: 'remark',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },

      {
        title: '修改时间',
        key: 'updateAt',
        dataIndex: 'updateAt',
        width: '160px',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '创建人/修改人',
        key: 'updateBy',
        dataIndex: 'updateBy',
        ellipsis: true,
        width: '160px',
        render(_, record) {
          const text = [record.updateBy, record.createBy].filter(Boolean).join('/');
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
    ];
  };
  getSearchList = () => {
    const options = [
      {
        value: 1,
        name: '启用',
      },
      {
        value: 2,
        name: '停用',
      },
    ];
    return [
      {
        name: 'name',
        component: <Input placeholder='函数名称' />,
      },
      {
        name: 'code',
        component: <Input placeholder='函数code' />,
      },
      {
        name: 'status',
        component: (
          <Select placeholder='状态'>
            {options.map((it) => {
              return (
                <Select.Option value={it.value} key={it.value}>
                  {it.name}
                </Select.Option>
              );
            })}
          </Select>
        ),
      },
      {
        name: 'createBy',
        component: <Input placeholder='创建人' />,
      },
      {
        name: 'updateBy',
        component: <Input placeholder='修改人' />,
      },
    ];
  };
  render() {
    const ListsComponent = this.listsComponent;
    return (
      <div>
        <SearchBar
          searchList={this.getSearchList()}
          query={this.freshQueryList}
          onChange={this.refreshFilter}
          reset={this.resetListAndSearch}
        />
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <Row type='flex' justify='space-between' align='middle' className='pb-10'>
            <Col span={6}>
              <Button type='primary' onClick={this.add.bind(this, { title: '新建函数' })}>
                新建函数
              </Button>
            </Col>
          </Row>
          <ListsComponent
            {...this.state}
            rowKey='code'
            scroll={{ x: true }}
            edit={this.edit}
            queryList={this.freshQueryList}
            clearSelected={this.clearSelected}
            columns={this.getColumns()}
            onChangePagination={this.onChangePagination}
          />
        </div>
      </div>
    );
  }
}

export default FnIndex;
